<template>
  <view class="spend">
		<!-- <down-load-app-com ></down-load-app-com> -->
    <nav-com></nav-com>
    <!-- <image class="head" mode="aspectFit" src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/product/hot-past-head.png"></image> -->
		<image class="head" mode="aspectFit" src="/static/images/spend-area-bg.png"></image>
    <view class="content" v-if="pageItems.length>0">
      <section-products-list-com :products="pageItems" ></section-products-list-com>
    </view>
  </view>
</template>

<script>
import Pagination from "mixins/Pagination"
import SectionProductsListCom from "components/product/hot/SectionProductsListCom"
import NavCom from "components/common/NavCom"
import {getProductsList} from "api/productApi"

export default {
  name: "spend",
	mixins: [Pagination],
  components: {
		SectionProductsListCom,
		NavCom
	},
  methods: {
    async loadPageItems() {
      return await getProductsList({
        page: this.pageNumber,
        "filter[is_spend_section]": 1
      })
    }
  },
  async onLoad() {
    await this.loadPageData()
  }
}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.spend {
		.head {
			width: 750rpx;
			height: 432rpx;
		}
		.content {
			padding: 30rpx;
			background-color: #F6F6F6;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			position: relative;
			margin-top: -92rpx;
			z-index: 99;
		}
	}
</style>
